<template>
    <div class="led">
        <div class="ledCard" v-for="item in cameraList">
            <Card>
                <p slot="title">
                    {{item.id}}
                </p>
                <div style="width: 100%;height: 100px; display: flex;  justify-content: space-between;" >
                    <div style="width: 48%;display: flex; align-items: center; flex-direction: column; justify-content: center;">
                        <img style="width: 55px; cursor: pointer;" :src="item.ledstat == 1 ? '/light-green.png' : '/light-off.png'" @click="changeStat(item, item.ledstat, 1)" />
                        <div>1号灯</div>
                    </div>
                    <div style="width: 48%;display: flex; align-items: center; flex-direction: column; justify-content: center;">
                        <img style="width: 55px; cursor: pointer;" :src="item.ledstat == 2 ? '/light-green.png' : '/light-off.png'" @click="changeStat(item, item.ledstat, 2)" />
                        <div>2号灯</div>
                    </div>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
import util from "@/api/util.js";
import { io } from "socket.io-client";
const socket = io();
export default{
    data(){
        return{
            cameraList:[]
        }
    },
    methods:{
        getCameraList(){
            let self = this;
            let param = {
                action: "getCameraData",
                pageSize: 10000,
                currentPage: 1
            }

            util.post(self, "camera/getCameraData", param, function (res) {
                self.cameraList = res.data.data.data;
            })
        },
        changeStat(camera, ledstat, lednum) {
            console.log(camera, ledstat, lednum);
            if(ledstat == lednum){
                let param = {
                    mac: camera.id,
                    ledstat:0,
                    ipaddress:camera.ip
                };
                socket.emit("Camera/tx", param);
            }else{
                let param = {
                    mac: camera.id,
                    ledstat:lednum,
                    ipaddress:camera.ip
                };
                socket.emit("Camera/tx", param);
            }
        }
    },
    mounted(){
        let self = this;
        this.getCameraList();
        socket.on("ledstat", (data) => {
            console.log(data);
            if(data == 'ledstatchange'){
                self.getCameraList();
            }
        })
    }
}
</script>
<style>
.led{
    width: 100%;
    height: 96.5%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    .ledCard{
        width: 30%;
        height: 20%;
        margin: 10px;
    }
}
</style>